<!DOCTYPE html>

<html>
<head>
    <title>顶点概念几何图形</title>
    <script type="text/javascript" src="../../three.js/build/three.js"></script>

    <!--鼠标控制-->
    <script type="text/javascript" src="../../three.js/examples/js/controls/OrbitControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    // 创建场景对象
    var scene = new THREE.Scene();

    var geometry = new THREE.BoxGeometry(100,100,100);// 创建一个立方体对象
    geometry.faces.forEach(face => {
        face.vertexColors = [
            new THREE.Color(0x00ffcc),
            new THREE.Color(0xff00cc),
            new THREE.Color(0xffcc00),
        ]
    });
    geometry.scale(2,3,1);// x放大2，y放大3，
    geometry.translate(100,150,50);// x向左平移100，向y平移50，向z平移-50
    geometry.rotateY(- Math.PI /4); // 绕y轴旋转45°

    console.log(geometry);
    console.log('几何体顶点位置数据', geometry.vertices);
    console.log('三角面数据', geometry.faces);
    var material = new THREE.MeshLambertMaterial({
        // color: 0x00ffcc,
        // wireframe: true,
        vertexColors : THREE.faceColors,
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // 设置材质
    var material = new THREE.MeshLambertMaterial({
        vertexColors: THREE.VertexColors,
        side: THREE.DoubleSide
    });
    var mesh = new THREE.Mesh(geometry, material); // 网格模型
    scene.add(mesh);

    // 辅助坐标系
    var axisHelper = new THREE.AxesHelper(1000);
    scene.add(axisHelper);

    // 点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400,200,300);// 点光源位置
    scene.add(point);
    // 环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

    // 相机设置
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width/height;
    var s = 200;// 三维场景显示范围控制系数，系数越大，显示范围越大
    var camera = new THREE.OrthographicCamera(-s*k, s*k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);// 相机位置
    camera.lookAt(scene.position);// 设置相机方向

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);// 设置渲染区域大小
    renderer.setClearColor(0xb9d3ff, 1);// 设置背景色
    document.body.appendChild(renderer.domElement);// body 元素中插入

    function iRenderer(){
        // 执行渲染
        renderer.render(scene, camera);

        requestAnimationFrame(iRenderer);
    }
    iRenderer();
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
</script>
</body>
</html>